<template>
  <view :style="[newStyle, cusStyle]" :class="[cusClass]" class="mxp-safe-status-bar"></view>
</template>

<script lang="ts" setup>
  import { type CSSProperties, type PropType, computed } from 'vue';
  import { publicStyeProps } from '../mxp-tool/utils/public-props';
  import type { $AllColorStr, $SizeUnitStr } from '../mxp-tool/types/interface';
  import { getXPNumber } from '../mxp-tool/utils/dom';
  import mxpGetSysInfoStore from '../mxp-tool/store/mxp-store-sys-info';
  defineOptions({
    name: 'mxp-safe-status-bar',
  });

  const props = defineProps({
    /** 背景色 */
    background: { type: String as PropType<$AllColorStr>, default: 'transparent' },
    /** 其他高度 */
    restHeight: { type: String as PropType<$SizeUnitStr>, default: '0px' },
    ...publicStyeProps,
  });
  const sys = mxpGetSysInfoStore().getSysInfo();
  const newStyle = computed<CSSProperties>(() => {
    return { height: `${getXPNumber(props.restHeight, 0) + (sys.value.statusBarHeight || 0)}px`, backgroundColor: props.background };
  });
</script>

<style lang="scss" scoped>
  .mxp-safe-status-bar {
    /* #ifndef APP-NVUE */
    width: 100%;
    /* #endif */
  }
</style>
